import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

//高阶组件是一个参数为组件，并且返回值为新组件的函数;
//使用高阶组件实现路由守卫：
function WithRouter({ children }) {
    function NewCpn() {
        const navigate = useNavigate();
        //获取当前路由的路径
        const { pathname } = useLocation();
        //获取本地存储的token
        const token = localStorage.getItem("token");

        //白名单,写在这里的路由不需要守卫，可以直接访问
        const WhiteList = ["/login", "/register", "*"];

        //在组件挂载后，判断当前路由是否需要守卫
        useEffect(() => {
            //如果没有token，并且当前路由不是白名单中的路径，则重定向到登录页面
            if (!token && !WhiteList.includes(pathname)) {
                navigate("/login");
            }
        }, [pathname, token]);

        return children;
    }

    return <NewCpn></NewCpn>;
}

export default WithRouter;
